<template>
    <div>
        <TopNav :obj="obj"></TopNav>
        <div class="month">
            月份选择：<el-date-picker v-model="pageObj.date" type="month" placeholder="选择月" @change="changeFn"
                :value-format="'YYYY' + '-' + 'MM'" />
        </div>
        <PayTable :tableData="tableData" :total="total" :pageObj="pageObj"></PayTable>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted } from "vue"
import TopNav from '../../components/TopNav.vue';
import PayTable from './components/PayTable.vue'
import { $GetUseData } from '../../api'
export default defineComponent({
    name: 'UseRecord',
    components: { TopNav, PayTable },
    setup() {
        const Data = reactive({
            obj: {
                path: '计费',
                title: '使用记录',
                msg: '统计当前账户每天消费的额度记录总数，可查看历史月份的使用记录。'
            },
            tableData: [],
            pageObj: {
                currPage: 1,
                pageSize: 5,
                date: ''
            },
            total: 1
        })
        onMounted(() => {
            getData()
        })
        const getData = () => {
            $GetUseData(Data.pageObj).then(res => {
                Data.tableData = res.data.data
                Data.total = res.data.total
            })
        }
        const changeFn = () => {
            getData()
        }
        return { ...toRefs(Data),changeFn }
    }
    // data() {
    //     return {
    //         obj: {
    //             path: '计费',
    //             title: '使用记录',
    //             msg: '统计当前账户每天消费的额度记录总数，可查看历史月份的使用记录。'
    //         },
    //         tableData: [],
    //         pageObj: {
    //             currPage: 1,
    //             pageSize: 5,
    //             date: ''
    //         },
    //         total: 1
    //     };
    // },

    // mounted() {
    //     this.getData()
    // },

    // methods: {
    //     getData() {
    //         $GetUseData(this.pageObj).then(res => {
    //             this.tableData = res.data.data
    //             this.total = res.data.total
    //         })
    //     },
    //     changeFn() {
    //         this.getData()
    //     }
    // },
});
</script>

<style lang="less" scoped>
.month {
    background: #fff;
    padding: 15px 50px;
}
</style>